<!DOCTYPE html>
<html>
<head>
<title>Physics Explosion Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="450" height="350"></canvas>
<script>
    // Helper function to draw an arrow
    function drawArrow(ctx, fromx, fromy, tox, toy, lw, h) {
        const headlen = h || 10;
        const dx = tox - fromy;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.save();
        ctx.strokeStyle = "black";
        ctx.fillStyle = "black";
        ctx.lineWidth = lw || 1;

        // line
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.stroke();

        // arrowhead
        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }
    
    // Custom arrow for this specific diagram to match style
    function drawStyledArrow(ctx, fromx, fromy, tox, toy, lw, headlen) {
        const angle = Math.atan2(toy - fromy, tox - fromx);
        ctx.save();
        ctx.lineWidth = lw;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        
        // Line
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.stroke();

        // Head
        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.closePath();
        ctx.fill();
        
        ctx.restore();
    }


    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Define coordinates and constants
    const origin = { x: 220, y: 175 };
    const massDist = 70; // distance of 3M and 4M masses from origin
    const angleRad = Math.PI / 4; // 45 degrees in radians

    // Set styles
    ctx.font = 'bold 16px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.strokeStyle = 'black';

    // --- Draw Axes ---
    // Y-axis
    drawStyledArrow(ctx, origin.x, 320, origin.x, 30, 1, 10);
    ctx.fillText('+y', origin.x + 20, 35);
    // Negative X-axis
    ctx.beginPath();
    ctx.moveTo(50, origin.y);
    ctx.lineTo(origin.x, origin.y);
    ctx.lineWidth = 1;
    ctx.stroke();
    // Positive X-axis (thick arrow)
    drawStyledArrow(ctx, origin.x, origin.y, 400, origin.y, 3, 12);
    ctx.fillText('+x', 415, origin.y);

    // --- Mass positions ---
    const mass3M_pos = {
        x: origin.x - massDist * Math.cos(angleRad),
        y: origin.y - massDist * Math.sin(angleRad)
    };
    const mass4M_pos = {
        x: origin.x - massDist * Math.cos(angleRad),
        y: origin.y + massDist * Math.sin(angleRad)
    };
    const mass5M_pos = {
        x: origin.x + 120,
        y: origin.y
    };

    // --- Draw Dashed Lines ---
    ctx.save();
    ctx.setLineDash([4, 4]);
    ctx.lineWidth = 1;
    // To 3M
    ctx.beginPath();
    ctx.moveTo(origin.x, origin.y);
    ctx.lineTo(mass3M_pos.x, mass3M_pos.y);
    ctx.stroke();
    // To 4M
    ctx.beginPath();
    ctx.moveTo(origin.x, origin.y);
    ctx.lineTo(mass4M_pos.x, mass4M_pos.y);
    ctx.stroke();
    ctx.restore();

    // --- Draw Masses (Ellipses) ---
    ctx.lineWidth = 2;
    // 3M
    ctx.beginPath();
    ctx.ellipse(mass3M_pos.x, mass3M_pos.y, 22, 18, 0, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fillText('3M', mass3M_pos.x, mass3M_pos.y);
    // 4M
    ctx.beginPath();
    ctx.ellipse(mass4M_pos.x, mass4M_pos.y, 22, 18, 0, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fillText('4M', mass4M_pos.x, mass4M_pos.y);
    // 5M
    ctx.beginPath();
    ctx.ellipse(mass5M_pos.x, mass5M_pos.y, 28, 18, 0, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fillText('5M', mass5M_pos.x, mass5M_pos.y);

    // --- Draw Velocity Vectors ---
    const vectorLength = 50;
    // For 3M
    const v3M_end = {
        x: mass3M_pos.x - vectorLength * Math.cos(angleRad),
        y: mass3M_pos.y - vectorLength * Math.sin(angleRad)
    };
    drawStyledArrow(ctx, mass3M_pos.x, mass3M_pos.y, v3M_end.x, v3M_end.y, 2, 10);
    ctx.fillText('V', v3M_end.x - 20, v3M_end.y + 5);
    // For 4M
    const v4M_end = {
        x: mass4M_pos.x - vectorLength * Math.cos(angleRad),
        y: mass4M_pos.y + vectorLength * Math.sin(angleRad)
    };
    drawStyledArrow(ctx, mass4M_pos.x, mass4M_pos.y, v4M_end.x, v4M_end.y, 2, 10);

    // --- Draw Angle Arcs ---
    const arcRadius = 90;
    ctx.lineWidth = 1;
    // Arc for 3M
    ctx.beginPath();
    ctx.arc(origin.x, origin.y, arcRadius, Math.PI, 3 * Math.PI / 4, true);
    ctx.stroke();
    ctx.fillText('45°', origin.x - arcRadius*0.9, origin.y - 25);
    // Arc for 4M
    ctx.beginPath();
    ctx.arc(origin.x, origin.y, arcRadius, Math.PI, 5 * Math.PI / 4, false);
    ctx.stroke();
    ctx.fillText('45°', origin.x - arcRadius*0.9, origin.y + 25);

</script>
</body>
</html>